<template>
  <div class="detile">
    <div class="header">
      {{ name }}
    </div>
    <div class="count">
      <van-sidebar v-model="active">
        <van-sidebar-item
          v-for="(item, index) in menu"
          :key="index"
          :title="item.name"
        />
      </van-sidebar>
      <div class="right">
        <van-card v-for="(item,index) in menu[active].foods" :key="index"
          :title="item.name"
          thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
import api from "../api/request";
import { useRoute } from "vue-router";
export default {
  setup() {
    const route = useRoute();
    const data = reactive({
      name: "",
      menu: [],
      active: 0, // 默认选中的
    });
    api.get(`/shopping/restaurant/${route.query.id}`).then((res) => {
      data.name = res.name;
    });
    api.get(`/shopping/v2/menu?restaurant_id=${route.query.id}`).then((res) => {
      data.menu = res;
    });
    return {
      ...toRefs(data),
    };
  },
};
</script>
<style lang="scss" scoped>
.detile {
  height: 100%;
}
.header {
  height: 50px;
  line-height: 50px;
  text-align: center;
}
.count {
  height: calc(100% - 50px);
  overflow: auto;
  display: flex;
  .right {
    flex: 1;
    overflow: auto;
  }
}
</style>